<template>
	<view>
		<radio-group class="list" @change="radioChange">
			<label class="list_item" v-for="(item, index) in list" :key="item.value">
				<view class="list_item_text">
					<view class="list_item_text_num">
						<text>{{item.num}}</text>
						<text style="font-size: 33rpx;margin-left: 8rpx;color:#000">{{item.tip}}</text>
					</view>
					<view class="list_item_text_info">
						<view class="list_item_text_info_name">{{item.name}}</view>
						<view class="list_item_text_info_date">过期：{{item.expires_time | formatTime}}</view>
					</view>
				</view>
				<radio :value="item.value" :checked="index === current" color="#f9ba37" />
			</label>
		</radio-group>
		<!-- 结果为空 -->
		<view class="empty" v-show="is_empty">
			<image src="../../static/empty.png" class="empty_img"></image>
			<view class="empty_text">这里什么都没有哦~</view>
		</view>
	</view>
</template>

<script>
import Route from '../../utils/route.js';
export default {
	data() {
		return {
			// 数据为空
			is_empty: 0,
			list: [],
			current: ''
		};
	},
	filters: {
		formatTime(timestamp) {
			var date = new Date(timestamp * 1000); //timestamp 为10位需*1000，timestamp 为13位的话不需乘1000
			var Y = date.getFullYear() + '年';
			var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '月';
			var D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + '日';
			var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
			var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
			var s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
			return Y + M + D;
		}
	},
	async onLoad() {
		let res = await Route.lottery_order({
			uid:uni.getStorageSync('userInfo').uid
		})
		for (var i = 0; i < res.length; i++) {
			res[i].lottery_id = res[i].id;
			res[i].value = res[i].coupon_id;
			res[i].name = res[i].type==1?'立减券':'折扣券';
			res[i].tip = res[i].type==1?'元':'折';
		}
		this.list = res;
		if (this.list.length <= 0) {
			this.is_empty = 1;
		}
	},
	methods: {
		radioChange: function(evt) {
			for (let i = 0; i < this.list.length; i++) {
				if (this.list[i].value == evt.detail.value) {
					this.current = i;
					break;
				}
			}
			uni.setStorageSync('coupon',this.list[this.current])
			uni.navigateBack()
		}
	}
};
</script>

<style lang="scss">
page {
	background: #f8f8f8;
}
.list {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-top: 33rpx;
	&_item {
		border-radius: 16rpx;
		display: flex;
		align-items: center;
		width: 590rpx;
		height: 166rpx;
		background: #fff;
		padding: 22rpx;
		margin-bottom: 33rpx;
		&_text {
			display: flex;
			flex: 1;
			&_num {
				font-size: 49rpx;
				font-weight: 900;
				color: red;
			}
			&_info {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				margin-left: 66rpx;
				&_name {
					font-weight: 666;
					font-size: 33rpx;
				}
				&_date {
					margin-top: 22rpx;
					font-size: $uni-font-size-base;
					color: $uni-text-color-grey;
				}
			}
		}
	}
}
// 空列表
.empty {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 9;
	background: #fff;
	width: 100vw;
	height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	&_img {
		width: 386rpx;
		height: 282rpx;
	}
	&_text {
		margin-top: 8rpx;
		font-size: $uni-font-size-base;
		color: $uni-text-color-grey;
	}
}
</style>
